<template>
 
 <el-scrollbar height="100vh">
  <div class="common-layout">
    <el-row :gutter="24">
      <el-col :span="24">
        <el-card class="personal-info" shadow="hover">
          <template #header>
            <div class="card-header">
              <span>个人信息</span>
              <el-button class="button" type="primary" @click="show">修改信息</el-button>
            </div>
          </template>

          <el-row :gutter="12">
            <el-col :span="4" :offset="0" :style="{margin:'auto'}">
              

              <el-form :model="avatarFile">
              <el-upload
                class="avatar-uploader"
                action="/user/upload-avatar"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
              >
                

                <div class="avatar-container">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                  <div class="avatar-overlay">
                    <el-icon :style="{fontSize:'36px',color:'#fff'}" class="avatar-uploader-icon"><Plus /></el-icon>
                  </div>
                </div>
                
               
              </el-upload>
            </el-form>

            </el-col>
            <el-col :span="18" :offset="1">
              <el-row :gutter="40">
                <el-col :span="24" :offset="0">
                  <span class="pre-text">当前登陆时间：</span>
                  {{ time }}
                </el-col>
                <el-col :span="24" :offset="0">
                  <h1>欢迎你</h1>
                </el-col>
                <el-col :span="24" :offset="0">
                  <el-row :gutter="20">
                    <el-col :span="12" :offset="0">
                      {{ state.userinfo.nickname }}，{{ state.userinfo.personalSignature }}
                    </el-col>
                    <el-col :span="12" :offset="0">
                      <span class="pre-text">身份：</span>{{ state.userinfo.role }}
                    </el-col>
                  </el-row>

                </el-col>
                <el-col :span="24" :offset="0"> <el-divider /></el-col>

                <el-col :span="24" :offset="0">
                  <el-row :gutter="0">
                    <el-col :span="3" :offset="0"><span class="pre-text">所属职务：</span></el-col>
                    <el-col v-for="item in state.mockjson" :span="3" :offset="0" :key="item">
                      <el-tag>{{ item.department }} - {{ item.jobTitle }}</el-tag>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      


      <el-col :style="{ marginTop: '20px' }" :span="24" :offset="0">
        <div>
          <el-card shadow="hover">
            <template #header>
              <div class="card-header">
                <span>更新信息</span>
              </div>
            </template>

            <div ref="fatherForm" :style="{ height: flexHeight + 'px' }" class="user-form-update"
              :class="[showUpdateForm ? 'expand' : 'collapse']">


              <Transition appear name="slide-fade">
                <div ref="sonForm" v-show="showUpdateForm" :style="{ marginBottom: '30px' }">
                  <el-form class="form-update">

                    <el-row :gutter="40">
                      <el-col :span="24" :offset="0">
                        <p class="pre-detail">更新表单</p>
                      </el-col>
                      <el-col :span="5" :offset="1">
                        <el-form-item label="昵称">
                          <el-input v-model="state.updateBasicInfoForm.nickname" :placeholder="state.userinfo.nickname" />
                        </el-form-item>
                      </el-col>
                      <el-col :span="5" :offset="0">
                        <el-form-item label="职务">
                          <el-input disabled placeholder="Your Jobtitle" />
                        </el-form-item>
                      </el-col> <el-col :span="5" :offset="0">
                        <el-form-item label="签名">
                          <el-input v-model="state.updateBasicInfoForm.personalSignature" :placeholder="state.userinfo.personalSignature"/>
                        </el-form-item>
                      </el-col> <el-col :span="5" :offset="0">
                        <el-form-item label="部门">
                          <el-input disabled placeholder="Your nickname" />
                        </el-form-item>
                      </el-col>

                      <el-col :span="4" :offset="1">
                        <el-button icon="Position" type="primary" @click="sumbitBasicInfoForm">更新当前信息</el-button>
                      </el-col>


                    </el-row>

                  </el-form>
                </div>

              </Transition>
              <div class="user-detail">

                <el-row>
                  <el-col :span="24" :offset="0">
                    <p class="pre-detail">账号细节</p>
                  </el-col>

                  <el-col :span="20" :offset="0">
                    <el-row :gutter="20">
                      <el-col :span="23" :offset="1">
                        账号密码
                      </el-col>
                      <el-col :span="24" :offset="0">
                        <el-row :gutter="40">

                          <el-col :span="13" :offset="1">
                            <span class="pre-text">当前密码强度：安全</span></el-col>

                        </el-row>

                      </el-col>


                    </el-row>

                  </el-col>

                  <el-col :style="{ textAlign: center }" :span="2" :offset="0">
                    <el-button :style="{ height: '100%' }" text type="primary"> 立即修改 </el-button>
                  </el-col>


                </el-row>
                <el-divider />
                <el-row>


                  <el-col :span="20" :offset="0">
                    <el-row :gutter="20">
                      <el-col :span="23" :offset="1">
                        邮箱
                      </el-col>
                      <el-col :span="24" :offset="0">
                        <el-row :gutter="40">

                          <el-col :span="13" :offset="1">
                            <span class="pre-text">当前强度：安全</span></el-col>

                        </el-row>

                      </el-col>


                    </el-row>

                  </el-col>

                  <el-col :style="{ textAlign: center }" :span="2" :offset="0">
                    <el-button :style="{ height: '100%' }" text type="primary"> 立即修改 </el-button>
                  </el-col>


                </el-row>
                <el-divider /><el-row>


                  <el-col :span="20" :offset="0">
                    <el-row :gutter="20">
                      <el-col :span="23" :offset="1">
                        手机号
                      </el-col>
                      <el-col :span="24" :offset="0">
                        <el-row :gutter="40">

                          <el-col :span="13" :offset="1">
                            <span class="pre-text">当前：安全</span></el-col>

                        </el-row>

                      </el-col>


                    </el-row>

                  </el-col>

                  <el-col :style="{ textAlign: center }" :span="2" :offset="0">
                    <el-button :style="{ height: '100%' }" text type="primary" > 立即修改 </el-button>
                  </el-col>


                </el-row>
                <el-divider />

              </div>

            </div>
          </el-card>
        </div>
      </el-col>


    </el-row>
  </div>
</el-scrollbar>
</template>

<script setup>

import { onMounted, reactive, ref } from 'vue';
import useStore from '../../store';
import requestMethods from '../../api/api'
import { ElMessage, ElNotification } from 'element-plus'
import { nextTick } from 'process';

const showUpdateForm = ref(false)
const state = reactive({
  userinfo:{},
  updateBasicInfoForm:{
    nickname:'',
    personalSignature:'',
  },
  avatar:useStore().user.userinfo.avatar,
  mockjson: [{
    department: '事务部',
    jobTitle: '经理'}]
})



const avatarFile = ref(null);

const serverUrl = process.env.VUE_APP_AVATAR_API
const sonForm = ref()
const fatherForm = ref()
const flexHeight = ref()
const imageUrl = ref()

onMounted(()=>{
  imageUrl.value = state.avatar

  requestMethods.getUserAllInfo().then(res=>{
      state.userinfo = res.data.userInfo
      console.log(state.userinfo);
  })
})

const sumbitBasicInfoForm = () => {
  requestMethods.updateUserBasicInfo(state.updateBasicInfoForm).then(
    res => {
      state.userinfo.nickname = res.data.nickname ? res.data.nickname : state.userinfo.nickname
    state.userinfo.personalSignature = res.data.personalSignature ? res.data.personalSignature : state.userinfo.personalSignature
      console.log( res.data?.personalSignature);
      useStore().user.userinfo.nickname = res.data.nickname

    

      ElNotification({
      title: '成功',
      message: '信息已成功更新',
      type: 'success',
    })
    nextTick()
    }
  ).catch(err => {
    ElNotification({
      title: '错误',
      message: '更新不成功，请检查错误原因' + err,
      type: 'error',
    })
  })
}

const handleAvatarSuccess = () => {
      imageUrl.value = URL.createObjectURL(avatarFile.value);
      console.log(imageUrl.value);
      ElMessage.success('上传成功');
     
    };


const beforeAvatarUpload = (file) => {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJpgOrPng) {
        ElMessage.error('上传头像图片只能是 JPG/PNG 格式!');
        return false;
      }
      if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 2MB!');
        return false;
      }

      avatarFile.value = file;

      requestMethods.uploadAvatar(file).then(res=>{
          console.log(res.data);
           // 将 Data URL 绑定到 avatarUrl 属性上，以在 img 标签中显示图片
           state.avatarUrl = `${serverUrl}/${res.data.avatar.replace(/\\/g, '/')}`;
           useStore().user.userinfo.avatar = state.avatarUrl})
           .catch(err => {
            console.log(err)
            })
      handleAvatarSuccess();
      return true;
    };

const show = () => {

  console.log(fatherForm);

  if (sonForm.value.clientHeight) {

    flexHeight.value -= sonForm.value.clientHeight

  } else {
    flexHeight.value += sonForm.value.clientHeight

  }


  showUpdateForm.value = !showUpdateForm.value

}

const time = ref(new Date)
</script>

<style scoped lang="less">
.personal-info {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;



  }
}

span.pre-text {
  color: #666;
  font-weight: lighter;

}


p.pre-detail {
  margin-left: 20px;
  position: relative;

  &::before {
    content: "";
    width: 2px;
    height: 12px;
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--el-color-primary);
  }
}


img.avatar{
  object-fit: cover;
  width:100%;
  height: 100%;
  border-radius: 4px;
  object-position: 50% 20%;
}


.avatar-container {
  position: relative;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  border-radius: 4px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.avatar-overlay:hover {
  opacity: 1;
}


.slide-fade-enter-active {
  transition: all 0.3s ease-in;
}

.slide-fade-leave-active {
  transition: all 0.3s ease-out;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
.common-layout{
  padding-bottom: 100px;
}
</style>